<template>
  <el-dialog title="选择审批人" :visible.sync="dialogVisible" width="40%">
    <el-form
      ref="leaderForm"
      :model="leaderForm"
      :rules="rules"
      label-width="110px"
      class="leaderForm mt20"
    >
      <el-form-item label="当前科室">
        <span class="font16">{{ depart }}</span>
      </el-form-item>

      <el-form-item label="部门负责人" prop="user_id">
        <el-select
          v-model="leaderForm.user_id"
          filterable
          placeholder="选择负责人"
          size="small"
          style="width: 50%"
        >
          <el-option
            v-for="(item, index) in users"
            :key="index"
            :label="item.nickName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>

      <el-form-item style="text-align: right">
        <el-button
          type="primary"
          @click="submitForm('leaderForm')"
        >提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { listLeader } from '@/api/system/sysuser'
export default {
  name: 'LeaderDialog',
  data() {
    return {
      depart: '',
      dialogVisible: false,
      listQuery: {
        page: 1,
        per_page: 10
      },
      users: [],
      leaderForm: {
        user_id: ''
      },
      rules: {
        user_id: [
          { required: true, message: '请选择负责人', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleInversion() {
      this.dialogVisible = true
      listLeader({
      }).then(response => {
        this.users = response.data.list
        if (this.users.length > 0) {
          this.depart = this.users[0].deptName
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('selectLeader', this.leaderForm.user_id)
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
